<template>
  <div class="bor-bottom-shadow" style="position: fixed;top: .46rem;width: 100%;background-color: #fff;z-index: 51">
    <div class="tab-box" >
      <div class="tab-one-lv-item" v-for="(item,index) in screenData" :key="index"
           :class="[{'active':item.value==tabOneLvIndex}]">
        <div class="flex a-center l-center"  @click="tabOneLv(item.value)">
          <span>{{item.label}}</span>
          <i class="iconfont blue icon-arrow-right1 f14 c-B2B2B2" :class="[{'active':tabOneLvIndex == item.value}]"></i>
        </div>
        <div v-if="tabOneLvIndex === item.value && tabTwoLvShow" class="tab-item-options-box bor-bottom-shadow">
          <div class="tab-two-lv-item f14" v-for="(item2,index2) in item.options" :key="index2"
               @click="tabTwoLv(item.value,item2,index2)" :class="[{'active':index2==tabTwoLvIndex}]">
            <span>{{item2.label}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  props: ['screenData', 'haveCheckData'],
  data() {
    return {
      tabOneLvIndex: '0',
      tabOneLvItem: null,
      tabTwoLvIndex: -1,
      tabTwoLvItem: null,
      tabTwoLvShow: false
    }
  },
  created() {
    // console.log('this.$props.haveCheckData', this.$props.haveCheckData)
  },
  components: { },
  methods: {
    tabOneLv(type) {
      const that = this
      that.tabOneLvIndex = type
      if (type === 'issue') {
        that.tabTwoLvShow = !that.tabTwoLvShow
        that.tabTwoLvIndex = that.$props.haveCheckData.issueIndex
      }
      if (type === 'arrive') {
        that.tabTwoLvShow = !that.tabTwoLvShow
        that.tabTwoLvIndex = that.$props.haveCheckData.arriveIndex
      }
    },
    tabTwoLv(type, item, index) {
      this.tabTwoLvIndex = index
      this.tabTwoLvItem = item
      const that = this
      this.tabTwoLvShow = false
      that.$emit('screen-confirm', { type, item, index })
    }
  }
}
</script>

<style scoped>
  /*icon 旋转*/
  .icon-arrow-right1.active{
    color:#01a4f6 ;
    transform:rotate(90deg);
    -ms-transform:rotate(90deg); 	/* IE 9 */
    -moz-transform:rotate(90deg); 	/* Firefox */
    -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
    -o-transform:rotate(90deg); 	/* Opera */
  }
  /*tab-box*/
  .tab-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
  }
  .tab-one-lv-item{
    text-align: center;
    flex: 1;
    padding: 0.12rem .08rem;
    border-bottom: 0.01rem solid #d8d8d8;
    border-right: 0.01rem solid #d8d8d8;
  }
  .tab-one-lv-item.active{
    color:#01a4f6 ;
  }
  .tab-item-options-box{
    z-index: 12;
    width: 100%;
    background-color: #fff;
    position: absolute;
    top: 100%;
    left: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: .1rem;
  }
  .tab-two-lv-item{
    color: #333;
    font-size: .14rem;
    border: 1px solid #dedede;
    float: left;
    overflow: hidden;
    text-align: center;
    padding:.03rem .06rem .03rem .06rem;
    border-radius: .04rem;
    margin: 0.08rem .1rem .08rem 0;
    display: block;
    position: relative;
  }
  .tab-two-lv-item.active{
    color: #fff;
    border: 1px solid #01a4f6;
    background-color: #01a4f6;
  }
</style>
